@import '@/lib/reset.scss';

.BroadcastingList{
    @include background-color(#F3F3F3);
    @include rect(100%, 1100px);
    padding-top: 35px;
    .BroadcastingList-left{
        float: left;
        @include rect(93px, 531px);
        margin-left: 115px;
        ul{
            border-left: 1px solid #ddd;
            @include rect(93px, 531px);
            display: flex;
            @include justify-content(space-around);
            @include flex-direction(column);
            hr{
                width: 19px;
                margin-left: 0;
            }
            li{
                a{
                    @include text-color(#666);
                    @include font-size(15px);
                }
                hr{
                    float: left;
                    width: 35px;
                    @include margin(10px 25px 0 0);
                    @include text-color(#ddd);
                }
            }
            .active{
                @include text-color(#31c27c);
                hr{
                    @include text-color(#31c27c);
                }
            }
        }
    }
    .BroadcastingList-right{
        float: right;
        @include rect(955px, 100%);
        @include margin(20px 115px 0 0);
        h3{
            @include text-color(#aaa);
            @include font-size(15px);
            margin-bottom: 45px;
            hr{
                float: right;
                width: 914px;
                @include text-color(#ccc);
                @include margin(10px 0 0 0);
            }
        }
        ul{
            display: flex;
            @include justify-content(space-between);
            @include flex-wrap(wrap);
            li:last-child{
                align-self: flex-start;
            }
            li{
                @include rect(223px, 326px);
                div{
                    @include rect(223px, 223px);
                    overflow: hidden;
                    img{
                        @include rect(223px, 223px);
                        transition: all 0.5s;
                        &:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                p{
                    margin-top: 20px;
                    margin-bottom: 5px;
                    @include text-color(#000);
                }
                span{
                    @include text-color(#aaa);
                }
            }
        }
    }
}